<template>
<div class="equipment-screen ">
  <div class="fullscreen mask" style="flex: 1;display: flex;flex-direction: column">
    <div class="header">
      <div class="header-left">xxxxxx公司设备状态监控</div>
      <div class="header-center">物流设备监控平台</div>
      <div class="header-right">2024-11-19 09:40:52  星期二</div>
    </div>
    <div class="equipment-screen-container">
      <div class="container-left"><EquipmentLeft></EquipmentLeft></div>
      <div class="container-right"><EquipmentRight></EquipmentRight></div>
    </div>
  </div>
</div>
</template>
<script>
import EquipmentLeft from '@/views/equipmentScreen/components/equipmentLeft.vue'
import EquipmentRight from '@/views/equipmentScreen/components/equipmentRight.vue'
export default {
  name:"equipmentScreen",
  components:{
    EquipmentLeft,
    EquipmentRight,
  },
  data(){
    return{
    }
  }
}
</script>
<style scoped lang="scss">
$root-font-size: 106.6px;
@function px-to-rem($px) {
  @return ($px / $root-font-size) * 1rem;
}
.mask{
  background: rgba(0,0,0,.65);
}
.fullscreen{
  width: 100%;
  height: 100%;
}
.equipment-screen{
  width: 100%;
  height: 100vh;
  background:url("./images/background.jpg");
  background-size:100% 100%;
  box-sizing: border-box;
  font-size: px-to-rem(16px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  div{
    box-sizing: border-box;
  }
  .header{
    width: 100%;
    height: px-to-rem(46px);
    background:url("./images/top.png");
    background-size:100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #46BFEA;
    padding-top: px-to-rem(4px);
    .header-left{
      padding-top: px-to-rem(8px);
      padding-left: px-to-rem(33px);
    }
    .header-center{
      font-weight: 600;
      font-size: px-to-rem(30px);
      background: -webkit-linear-gradient(0deg, #09B6F3 0%, #08EADD 100%); /* Chrome, Safari */
      background: linear-gradient(0deg, #09B6F3 0%, #08EADD 100%); /* 标准语法 */
      -webkit-background-clip: text; /* Chrome, Safari */
      background-clip: text;
      -webkit-text-fill-color: transparent; /* Chrome, Safari */
      color: transparent;
    }
    .header-right{
      padding-top: px-to-rem(8px);
      padding-right: px-to-rem(33px);
    }

  }
  .equipment-screen-container{
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding: px-to-rem(0px) px-to-rem(20px) px-to-rem(6px);
    overflow: hidden;
  }
  .container-left{
    width: px-to-rem(430px);
    height: 100%;
  }
  .container-right{
    width: px-to-rem(430px);
    height: 100%;
  }
}

</style>